import React, { useEffect, useState } from "react";
import { Modal, Form, Input, Radio, Select, Button, Row, Col } from "antd";

import { ProjectType, EnvironmentType, PostConfig, ConfigData, GlobalEditParamProps } from "../../types"; // 从上上层目录导入
import { postBaseConfig, postConfig, queryBaseConfig, queryPreviewConfig, tryMsg, useEnvConfig, useGetEnvironments, useGetProjects } from "../../service";

const { TextArea } = Input;
const { Option } = Select;


interface GlobalEditProps {
    params : GlobalEditParamProps;

    onClose: () => void;
    onSubmit?: (data: PostConfig) => void;
  }
  
  interface FormData {
      projectId: number
      content: string,
  } 
  
 

const GlobalEdit: React.FC<GlobalEditProps> = ({ params, onClose, onSubmit }) => {
  const [form] = Form.useForm<PostConfig>();
  const handleCancel = ()=>{
    onClose();
  }
  const handleOk = ()=>{
        form.validateFields().then(async (values:FormData) => {
    
            await tryMsg(async()=>{
                await postBaseConfig({projectId:params.projectId,content:values.content})
            })
            onClose();
        });
     
  }
  useEffect(()=>{
    console.log("    params?.projectId ",    params?.projectId )
    params?.projectId && queryBaseConfig({projectId:params?.projectId}).then(x=>{
        console.log("contentcontentcontentcontent",x.data)
        form.setFieldValue("content",x.data.content)
    })
  },[params?.projectId])
  const initForm:FormData|null = null;
  
  return (
    <Modal
      title="编辑全局配置"
      open={params?.open}
      key={params?.projectId}
      destroyOnClose={true}
      onCancel={handleCancel}
      footer={[
        <Button key="cancel" onClick={handleCancel}>
          取消
        </Button>,
       
        <Button key="submit" type="primary" onClick={handleOk}>
          提交
        </Button>,
      ]}
      // closeIcon={<CloseOutlined />}
      width={1000} // 增加对话框宽度
    >
    
      <Form form={form} layout="vertical" initialValues={initForm}>
  
        <Row gutter={24}> 
          
          <Col span={24}>
            <Form.Item
              name="content"
              label={`ID:${params?.projectId} ${params?.name}  配置内容`}
              rules={[{ required: true, message: "请输入配置内容" }]}
            >
              <TextArea rows={25} placeholder="请输入配置内容" />
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
};

export default GlobalEdit;